import React, { useEffect, useState ,Key} from "react";
import { useNavigate, useParams } from "react-router-dom";
import {
  Card,
  Form,
  Input,
  Button,
  Space,
  Table,
  message,
  Tooltip,

} from "antd";
import {
  SearchOutlined,
  EditOutlined,
  DeleteOutlined,
} from "@ant-design/icons";
// import "./index.less"
import type { ColumnsType } from "antd/lib/table";

import {
  reqHospitalSets,
  reqDeletOneHospitalSet,
  reqBatchDelHospitalSets
  // reqAddHospital,
  // reqGetHospital,
} from "@api/user/hospital/hospitalSet";
import { IhospitalSetResponse } from "@/api/user/hospital/model/hospitalSetTypes";
import {
  IhospitalSetList,
  IhospitalSetResItem,
  // HospitalItem,
} from "@api/user/hospital/model/hospitalSetTypes";
// import { useNavigate } from "react-router-dom";

let isSearch = false;
let selectKeys: Key[] = []

function HospitalSet() {
  // interface DataType {
  //   key: string;
  //   name: string;
  //   age: number;
  //   address: string;
  //   tags: string[];
  // }
  const deletOneHospitalSetHandle = (id: number) => {
    return async () => {
      console.log('调用了')
      await reqDeletOneHospitalSet(id);
      console.log(2233)
      message.success("删除成功");
     
      getHospitalSets(page, pageSize);
    };
  };

  const navigate = useNavigate();
  const goUpdateHospitalSet = (id: number) => {
    return () => {
      navigate('/syt/hospital/hospitalSet/update/' + id)
    }
  }

  const columns: ColumnsType<IhospitalSetResItem> = [
    {
      title: "序号",
      // dataIndex: 'name',
      // key: 'name',
      render: (text, record, index) => {
        return index + 1;
      },
      align: "center",
      width: 80,
    },
    {
      title: "医院名称",
      dataIndex: "hosname",
      // key: 'age',
    },
    {
      title: "医院编号",
      dataIndex: "hoscode",
      // key: 'address',
    },
    {
      title: "api路径",
      // key: 'tags',
      dataIndex: "apiUrl",
    },
    {
      title: "签名",
      dataIndex: "signKey",
      // key: 'address',
    },
    {
      title: "联系人姓名",
      dataIndex: "contactsName",
      // key: 'address',
    },
    {
      title: "联系人手机",
      dataIndex: 'contactsPhone',
      // key: 'address',
    },

    {
      title: "操作",
      // key: 'action',

      render: (data) => (
        <Space size="middle">
          <Tooltip title="修改医院">
            <Button
               onClick={goUpdateHospitalSet(data.id)}
              icon={<EditOutlined />}
              type="primary"
            ></Button>
          </Tooltip>
          <Tooltip title="删除医院">
            <Button
              onClick={deletOneHospitalSetHandle(data.id)}
              icon={<DeleteOutlined />}
              type="primary"
              danger
            ></Button>
          </Tooltip>
        </Space>
      ),
      fixed: "right",
      width: 120,
    },
  ];

  // const data: DataType[] = [
  //   {
  //     key: "1",
  //     name: "John Brown",
  //     age: 32,
  //     address: "New York No. 1 Lake Park",
  //     tags: ["nice", "developer"],
  //   },
  //   {
  //     key: "2",
  //     name: "Jim Green",
  //     age: 42,
  //     address: "London No. 1 Lake Park",
  //     tags: ["loser"],
  //   },
  //   {
  //     key: "3",
  //     name: "Joe Black",
  //     age: 32,
  //     address: "Sidney No. 1 Lake Park",
  //     tags: ["cool", "teacher"],
  //   },
  // ];
  const [hospitalSets, setHospitalSet] = useState<IhospitalSetList>([]);
  const [total, setTotal] = useState(50);
  const [page, setPage] = useState(1);
  const [pageSize, setPageSize] = useState(2);
  const [loading, setLoading] = useState(false);

  async function getHospitalSets(page: number, pageSize: number) {
    setPage(page);
    setPageSize(pageSize);
    setLoading(true);

    let result: IhospitalSetResponse;

    if (isSearch) {
      // 发送请求之前,要获取到hosname和hoscode
      const { hosname, hoscode } = form.getFieldsValue();
      result = await reqHospitalSets(page, pageSize, hosname, hoscode);
      // debugger
      console.log(result)
    } else {
      result = await reqHospitalSets(page, pageSize);
    }

    setLoading(false);
    setHospitalSet(result.records);
    // console.log(result.records)

    setTotal(result.total);
  }

  const [isDisabled, setIsDisabled] = useState(true)

  useEffect(() => {
    // async function fecth() {
    //   const result= await reqHospitalSets(page,pageSize)
    //   sethospitalSet(result.records)
    //   setTotal(result.total)
    // }
    // fecth()
    getHospitalSets(page, pageSize);
  }, []);
  const [form] = Form.useForm();

  const onFinish = (values: any) => {
    isSearch = true;
    getHospitalSets(1, pageSize);

    // console.log("Finidh:", values);
  };

  const clearSearchHandle = () => {
    isSearch = false;
    form.resetFields();
    getHospitalSets(1, pageSize);
    console.log(666)
  };

  // const onFinishFailed = (errorInfo: any) => {
  //     console.log('Failed:', errorInfo);
  //   }


  function goAddHospitalSet(){
      navigate("/syt/hospital/hospitalSet/add")

  }

  const batchDelHospitalSets = async () => {
    await reqBatchDelHospitalSets(selectKeys)
    message.success('批量删除成功')
    getHospitalSets(page, pageSize)
  }
  return (
    <Card>
      <Form
        form={form}
        name="basic"
        //   labelCol={{ span: 8 }}
        //   wrapperCol={{ span: 16 }}
        //   initialValues={{ remember: true }}
        onFinish={onFinish}
        // onFinishFailed={onFinishFailed}
        autoComplete="off"
        layout="inline"
      >
        <Form.Item
          // label="Username"
          name="hosname"
          // rules={[{ required: true, message: "Please input your username!" }]}
        >
          <Input placeholder="医院名称" />
        </Form.Item>

        <Form.Item
          // label="Password"
          name="hoscode"
          // rules={[{ required: true, message: "Please input your password!" }]}
        >
          <Input placeholder="医院编码" />
        </Form.Item>

        {/* <Form.Item name="remember" valuePropName="checked" wrapperCol={{ offset: 8, span: 16 }}>
        <Checkbox>Remember me</Checkbox>
      </Form.Item> */}

        <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
          <Button type="primary" htmlType="submit" icon={<SearchOutlined />}>
            查询
          </Button>
        </Form.Item>

        <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
          <Button
            onClick={clearSearchHandle}
            type="primary"
            // ghost={true}
            // disabled
          >
            清空
          </Button>
        </Form.Item>
      </Form>
      <Button
        type="primary"
        htmlType="submit"
        style={{ marginRight: "20px", marginTop: "10px" }}
        onClick={goAddHospitalSet}
      >
        添加
      </Button>
      <Button type="primary" danger disabled={isDisabled} onClick={
        batchDelHospitalSets
      }>
        批量删除
      </Button>
      <Table
        loading={loading}
        columns={columns}
        bordered
        dataSource={hospitalSets}
        style={{ marginTop: "10px" }}
        rowKey={"id"}
        scroll={{ x: 1500 }}
        pagination={{
          current: page,
          pageSize,
          total,

          showTotal: function (total) {
            return `总共：${total}`;
          },
          showSizeChanger: true,
          pageSizeOptions: ["2", "5", "10"],
          onChange: getHospitalSets,
          showQuickJumper: true,
        }}
        rowSelection={{
          onChange:(selectedRowKeys:Key[])=>{
            setIsDisabled(!selectedRowKeys.length)
            // 动态修改全局变量
            selectKeys = selectedRowKeys
        }}
      }
      />
      ;
    </Card>
  );
}

export default HospitalSet;
